<!-- 项目管理 -->
<template>
  <div class="project_list">
    <div class="table">
      <dt-grid ref="tableRef" :onFetch="onFetch" page>
        <template #btn>
          <Button type="primary" @click="addContract">新增项目</Button>
        </template>
      </dt-grid>
    </div>
    <add-edit-contract ref="addEditContractRef" @successful="successful"></add-edit-contract>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import dt from '@dt/dt'
  import { listOpt } from './biz/columns.js'
  import router from '@/router'
  import apiMgr from '../biz/index.js'
  import addEditContract from '../components/addEditContract.vue'

  const tableRef = ref()

  const successful = () => {
    addEditContractRef.value.hide()
    tableRef.value.fetch()
  }
  function onFetch(data) {
    console.log(data, '222')
    let params = {
      ...data
    }
    return apiMgr.getSysCompanyForWeb(params)
  }

  onMounted(() => {
    tableRef.value.init(new listOpt(fn))
    tableRef.value.fetch()
  })
  const addEditContractRef = ref()
  function addContract() {
    addEditContractRef.value.show()
  }
  const fn = {
    proEdit: (data) => {
      addEditContractRef.value.show(data)
    },
    delPro: (data) => {
      if (data.deleteStatus) {
        dt.ui.Modal.confirm({
          title: '删除',
          content: '请确认，是否将当前项目从系统中删除。删除后，已维护的内容将不可恢复',
          onOk: () => {
            let params = {
              id: data.id
            }
            apiMgr.removeSysCompanyForWeb(params).then((res) => {
              tableRef.value.fetch()
            })
          }
        })
      } else {
        dt.ui.Modal.info({
          title: '删除',
          content: '该主体已有关联的项目，不可删除。请先解除所有项目关联后再进行删除操作',
          okText: '我知道了'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .top_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .project_list {
    height: 100%;
    width: 100%;
    display: flex;

    .table {
      flex: 1;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    :deep(.ivu-tree-title) {
      width: calc(100% - 15px);
    }
  }
</style>
